<template>
  <detail-page
    :nav_list="nav_list"
    v-on:change-menu="changeMenu"
    v-loading="loading"
  >
    <!-- 测量值包括历史-->
    <div class="main_content" v-if="menuIdx == 0">
      <!-- <el-row :gutter="2">
        <el-col :span="24">
          <div class="filter_btn">组名过滤器</div>
        </el-col>
      </el-row>
      <img class="download_icon" src="@/assets/images/download.svg" alt="" />-->
      <el-row :gutter="2">
        <el-col :span="12">
          <div class="col12" v-if="measured.headerModel">
            {{ measured.headerModel.k4093 }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="col12" v-if="measured.headerModel">
            {{ measured.headerModel.machine }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="24">
          <div
            class="col24"
            v-if="measured.headerModel && measured.headerModel.k0001 === 0"
          >
            {{ measured.headerModel.k0005 }}
          </div>
        </el-col>
      </el-row>
      <el-row class="row_flex" :gutter="2">
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k1002 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            <!-- 批次号：{{ measured.headerModel.k4092 }} -->
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0014 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0004 }}
          </div>
        </el-col>
      </el-row>

      <div class="table_container">
        <table>
          <thead>
            <tr>
              <th>特征名</th>
              <!-- <th>类型</th> -->
              <th>单位</th>
              <!-- <th>标志</th> -->
              <th>上限</th>
              <th>下限</th>
              <th>结果</th>
              <th style="width: 30%">测量值图</th>
            </tr>
          </thead>
          <tbody v-if="measured.resultPage">
            <tr
              v-for="(item, idx) in measured.resultPage.data"
              :key="idx"
              @click="selectChartIdx(idx)"
            >
              <td>{{ item.k2002 }}</td>
              <!-- <td></td> -->
              <td>{{ item.k2142 }}</td>
              <!-- <td></td> -->
              <td>{{ item.k2110 }}</td>
              <td>{{ item.k2111 }}</td>
              <td>{{ item.k0001 }}</td>
              <td>
                <div class="bar_chart" :id="'bar' + idx"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination
        style="margin-top:5px;text-align:right;"
        background
        layout="total, sizes,prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>

      <div style="margin-right: 80px;width: 100%" v-if="measured.resultPage">
        <el-button
          v-show="measured.resultPage.data"
          plain
          class="download-file"
          @click="downloadFile"
          type="success"
          size="mini"
          >导出报表</el-button
        >
        <el-button
          v-show="measured.resultPage.data"
          plain
          class="download-file"
          @click="exportExcelTXAndRbar"
          type="warning"
          size="mini"
          >导出excel-x-r-bar</el-button
        >
        <el-button
          v-show="measured.resultPage.data"
          plain
          class="download-file"
          @click="exportExcelTorsion"
          type="warning"
          size="mini"
          >导出excel-扭力</el-button
        >
      </div>

      <el-row :gutter="2">
        <el-col :span="18">
          <div
            class="line_chart"
            id="line_chart"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
        <el-col :span="6">
          <!-- 直方图 -->
          <div
            class="line_chart"
            id="bar_chart"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="12">
          <div
            class="line_chartXAR"
            id="xbar"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            class="line_chartXAR"
            id="rbar"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
      </el-row>
    </div>
    <!--    <img :src="base64" alt="" width="1400" height="500">-->
    <!-- 特性概览+数值图表 -->
    <div class="main_content" v-if="menuIdx == 1">
      <!-- <img class="download_icon" src="@/assets/images/download.svg" alt="" /> -->
      <el-row :gutter="2">
        <el-col :span="12">
          <div class="col12">{{ measured.headerModel.k4093 }}</div>
        </el-col>
        <el-col :span="12">
          <div class="col12">{{ measured.headerModel.machine }}</div>
        </el-col>
      </el-row>
      <el-row class="row_flex" :gutter="2">
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k1002 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel"></div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0014 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0004 }}
          </div>
        </el-col>
      </el-row>
      <div class="table_container">
        <table>
          <thead>
            <tr>
              <th>特征名</th>
              <th>LSL</th>
              <th>USL</th>
              <th>n（有效）</th>
              <th>x̄</th>
              <th>6Σ</th>
              <th>cp目标</th>
              <th>cp</th>
              <th>cpk目标</th>
              <th>cpk</th>
              <th>总体要求</th>
            </tr>
          </thead>
          <tbody v-if="measured.resultPage">
            <tr
              v-for="(item, idx) in measured.resultPage.data"
              :key="idx"
              @click="selectChartIdx(idx)"
            >
              <td>{{ item.k2002 }}</td>
              <td>{{ item.k2110 }}</td>
              <td>{{ item.k2111 }}</td>
              <td>{{ item.n }}</td>
              <td>{{ item.avg }}</td>
              <td>{{ item.sixSigma }}</td>
              <td>{{ item.cpTarget }}</td>
              <td>{{ item.cp }}</td>
              <td>{{ item.cpkTarget }}</td>
              <td>{{ item.cpk }}</td>
              <td>
                <img
                  class="smile_icon"
                  src="@/assets/images/up_arraw.png"
                  alt
                  v-if="item.status == 1"
                />
                <img
                  class="smile_icon"
                  src="@/assets/images/yellow_up_arraw.png"
                  alt
                  v-if="item.status == 2"
                />
                <img
                  class="smile_icon"
                  src="@/assets/images/down_arraw.png"
                  alt
                  v-else-if="item.status == 3"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination
        style="margin-top:5px;text-align:right;"
        background
        layout="total, sizes,prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
      <div
        class="line_chart"
        id="line_chart"
        v-loading="chart_loading"
        v-show="chart_idx !== null"
      ></div>
    </div>

    <!--设备历史查询-->
    <div class="main_history" v-if="menuIdx == 2">
      <div class="by-history-grid">
        <div class="by-history-grid-form">
          <el-form :inline="true" :model="historyForm" class="demo-form-inline">
            <el-form-item label="日期" prop="datetimerange">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                format="yyyy-MM-dd HH:mm:ss"
                style="color: #2761db"
                size="mini"
                v-model="historyForm.dateTimeHistory"
                type="datetimerange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="工位" prop="station">
              <el-select
                size="mini"
                @change="changePrefer"
                filterable
                v-model="historyForm.preferId"
                placeholder="工位"
              >
                <el-option
                  v-for="(item, idx) in stationList"
                  :key="idx"
                  :value="item.id"
                  :label="item.name"
                >
                  <span style="color: #2761db">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机器" prop="machine">
              <el-select
                size="mini"
                @change="changeMaschine"
                filterable
                v-model="historyForm.maschineId"
                placeholder="机器"
              >
                <el-option
                  v-for="(item, idx) in preferList"
                  :key="idx"
                  :value="item.id"
                  :label="item.name"
                >
                  <span style="color: #2761db">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="型号" prop="model">
              <el-select
                size="mini"
                @change="Changek1000"
                filterable
                v-model="historyForm.k1000"
                placeholder="型号"
              >
                <el-option
                  v-for="(item, idx) in modelNumList"
                  :key="idx"
                  :value="item.id"
                  :label="item.name"
                >
                  <span style="color: #2761db">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="被测参数" prop="measures">
              <el-select
                size="mini"
                @change="changeMeasures"
                filterable
                v-model="historyForm.k2000"
                placeholder="被测参数"
              >
                <el-option
                  v-for="(item, idx) in MaschineParamList"
                  :key="idx"
                  :value="item.k2000"
                  :label="item.k2002"
                >
                  <span style="color: #2761db">{{ item.k2002 }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="箱号" prop="serialNumber">
              <el-input v-model="historyForm.k0014" clearable></el-input>
            </el-form-item>
            <el-button @click="querySerialNumber">查询</el-button>
          </el-form>
        </div>

        <div class="by-history-grid-cartonNo">
          <el-table
            max-height="1000px"
            size="mini"
            ref="multipleTable"
            :data="CartonNoTableData"
            :row-style="rowStyle"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="箱号" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>

        <div class="by-history-grid-echarts">
          <div
            class="by-history-grid-echarts-line"
            id="by-history-grid-echarts-line"
            style="width: 100%;height: 550px"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </div>
      </div>
    </div>

    <!-- 时间力矩位移 -->
    <div class="main_content" v-if="menuIdx == 3">
      <el-row :gutter="2">
        <el-col :span="12">
          <div class="col12" v-if="measured.headerModel">
            {{ measured.headerModel.k4093 }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="col12" v-if="measured.headerModel">
            {{ measured.headerModel.machine }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="24">
          <div
            class="col24"
            v-if="measured.headerModel && measured.headerModel.k0001 === 0"
          >
            {{ measured.headerModel.k0005 }}
          </div>
        </el-col>
      </el-row>
      <el-row class="row_flex" :gutter="2">
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k1002 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            <!-- 批次号：{{ measured.headerModel.k4092 }} -->
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0014 }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="col6" v-if="measured.headerModel">
            {{ measured.headerModel.k0004 }}
          </div>
        </el-col>
      </el-row>

      <div class="table_container">
        <table>
          <thead>
            <tr>
              <th>特征名</th>
              <!-- <th>类型</th> -->
              <th>单位</th>
              <!-- <th>标志</th> -->
              <th>结果</th>
              <th style="width: 30%">测量值图</th>
            </tr>
          </thead>
          <tbody v-if="measured.resultPage">
            <tr
              v-for="(item, idx) in measured.resultPage.data"
              :key="idx"
              @click="selectChartIdx(idx)"
            >
              <td>{{ item.k2002 }}</td>
              <!-- <td></td> -->
              <td>{{ item.k2142 }}</td>
              <!-- <td></td> -->
              <td>{{ item.k0001 }}</td>
              <td>
                <div class="bar_chart" :id="'bar' + idx"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination
        style="margin-top:5px;text-align:right;"
        background
        layout="total, sizes,prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>

      <el-row :gutter="2">
        <el-col :span="12">
          <div
            class="line_chart"
            id="curves_chart1"
            style="height: 450px;width: 750px"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            class="line_chart"
            style="height: 450px;width: 750px"
            id="curves_chart2"
            v-loading="chart_loading"
            v-show="chart_idx !== null"
          ></div>
        </el-col>
      </el-row>
    </div>

    <!-- 曲线历史集合 -->
    <div class="main_container" v-if="menuIdx == 4">
      <div class="left-box">
        <div>
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            format="yyyy-MM-dd HH:mm:ss"
            style="color: #2761db;width: 100%"
            size="mini"
            @change="curvesHistory"
            v-model="form.dateTime"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <br /><br />
        <div class="right-box-input-flex">
          <el-input
            size="mini"
            v-model="serialNumberInput"
            placeholder="请输入序列号"
          ></el-input>
          <el-button size="mini" @click="curvesHistory" type="primary"
            >搜索</el-button
          >
        </div>
        <br /><br />
        <el-tree
          style="max-height: 1200px"
          :data="historyData"
          :props="curvesHistoryProps"
          show-checkbox
          @check="curvesHistoryCheck"
        ></el-tree>
        <!-- <div class="all_checkbox">
          <el-checkbox
            v-model="historyCheckAll"
            @change="checkAll"
            label="全选"
            border
            size="small"
          ></el-checkbox>
        </div>
        <el-checkbox-group
          v-infinite-scroll="curvesHistory"
          infinite-scroll-disabled="infinite_disabled"
          infinite-scroll-immediate="infinite_immediate"
          @change="changeHistoryChart"
          v-model="historyCheckboxGroup"
          size="small"
        >
          <el-checkbox
            v-for="(item, index) in historyData"
            :key="index"
            :label="item.k0014"
            border
            >{{ item.k0004 }}</el-checkbox
          >
        </el-checkbox-group>-->
      </div>
      <div class="right-box">
        <div id="curves_history_chart1" style="width: 97%;height: 550px"></div>
        <div id="curves_history_chart2" style="width: 97%;height: 550px"></div>
      </div>
    </div>

    <!--曲线假设分析-->
    <div class="main_whatif" v-if="menuIdx == 5">
      <div class="main_whatif-form">
        <el-form :inline="true" :model="curve" class="demo-form-inline">
          <el-form-item label="日期" prop="datetimerange">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              format="yyyy-MM-dd HH:mm:ss"
              style="color: #2761db"
              size="mini"
              v-model="curve.dateTimeHistory"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工位" prop="station">
            <el-select
              size="mini"
              @change="changeCurvesPrefer"
              filterable
              v-model="curve.preferId"
              placeholder="工位"
            >
              <el-option
                v-for="(item, idx) in curvesStationList"
                :key="idx"
                :value="item.id"
                :label="item.name"
              >
                <span style="color: #2761db">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机器" prop="machine">
            <el-select
              size="mini"
              @change="getModelNumListByWhatIf"
              filterable
              v-model="curve.maschineId"
              placeholder="机器"
            >
              <el-option
                v-for="(item, idx) in curvesPreferList"
                :key="idx"
                :value="item.id"
                :label="item.name"
              >
                <span style="color: #2761db">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="型号" prop="model">
            <el-select
              size="mini"
              @change="curvesChangek1000"
              filterable
              v-model="curve.k1000"
              placeholder="型号"
            >
              <el-option
                v-for="(item, idx) in curvesModelNumList"
                :key="idx"
                :value="item.id"
                :label="item.name"
              >
                <span style="color: #2761db">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="main_whatif-numList">
        <div>
          <el-tree
            style="max-height: 500px"
            :default-expand-all="true"
            :data="curvesWhatIfData"
            :props="curvesHistoryProps"
            show-checkbox
            @check="curvesWhatIfDataCheck"
          ></el-tree>
        </div>
      </div>
      <div class="main_whatif-echarts">
        <div class="main_whatif-echarts-select">
          <div class="main_whatif-echarts-select-radio-group">
            <el-radio-group
              @change="changeK2002"
              v-model="radioGroupSelect"
              v-if="curvesTypeMsg.length > 0"
            >
              <el-radio-button
                v-for="(item, index) in curvesTypeMsg"
                :label="item.k2002"
                :key="index"
              ></el-radio-button>
            </el-radio-group>
          </div>
          <div class="main_whatif-echarts-select-echarts">
            <div
              v-show="isShowCurvesCharts"
              id="main_whatif-echarts1"
              style="width: 800px;height: 350px"
              class="chart_box"
            ></div>
          </div>
          <div v-if="k0014ss.length > 0" class="to-whatif-dialog-btn">
            <el-button @click="toInputTarget">查看假设分析</el-button>
          </div>
        </div>
        <div class="main-whatif-inputTarget-dialog">
          <el-dialog
            title="输入假设分析-目标值"
            :visible.sync="dialogVisibleTarget"
            width="30%"
          >
            <el-input
              v-model="whatifTarget"
              type="number"
              placeholder="请输入目标值"
            ></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleTarget = false">取 消</el-button>
              <el-button type="primary" @click="submitWhatifTarget"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
        <div class="main-whatif-echarts-dialog">
          <el-dialog
            title="假设分析/检验"
            :visible.sync="whatifResulEcharts"
            width="70%"
          >
            <div class="main-whatif-class">
              <div
                id="main-whatif-test"
                style="width: 500px;height: 200px"
              ></div>
              <br />
              <br />
              <div
                id="main-whatif-pillars"
                style="width: 500px;height: 350px"
              ></div>
              <div
                id="main-whatif-line"
                style="width: 500px;height: 350px"
              ></div>
            </div>

            <!--            <span slot="footer" class="dialog-footer">-->
            <!--            <el-button @click="whatifResulEcharts = false">关闭</el-button>-->
            <!--            </span>-->
          </el-dialog>
        </div>
      </div>
    </div>
  </detail-page>
</template>

<script>
import DetailPage from '../../components/DetailPage/index.vue'
import {
  getPrefer,
  getPreferCurves_,
  getByPreferId,
  getPartById,
  getByK0014,
  getSerialNumber,
  getMeasuresNumber,
} from '@/api/historymsg'
import {
  getPreferCurves,
  getSimpleList,
  getCurvesType,
  getCurvesHistoryTree,
} from '@/api/curves'
import { getCurveshypothesis, getCurvesPointdata } from '@/api/whatif'
import {
  getMeasured,
  getMeasuredChart,
  getOverview,
  getValueChart,
  getXbarR,
  hasCurves,
  curvesTable,
  curvesTime,
  curvesForceStroke,
  curvesHistoryTree,
  curvesTime32,
  curvesForceStroke32,
  exportChat,
  exportExcelTorsion,
  exportExcelXAndRbar,
} from '@/api/monitor'
import ecStat from 'echarts-stat'
import DateTime from '@/components/DateTime/index.vue'
import Hamburger from '../../components/Hamburger/index'
import { mapGetters } from 'vuex'

export default {
  components: { Hamburger, DetailPage, DateTime },
  computed: {
    ...mapGetters(['sidebar', 'nickname']),
  },
  data() {
    return {
      serialNumberInput: '',
      whatiftestList: [],
      whatiftest: {
        high_line: 0,
        low_line: 0,
      },
      whatifResulEcharts: false,
      whatifResultMsg: {},
      dialogVisibleTarget: false,
      whatifTarget: undefined,
      radioGroupSelect: undefined,
      curvesTypeMsg: [],
      curvesWhatIfData: [],
      curvesModelNumList: [],
      curvesPreferList: [],
      curvesStationList: [],
      curve: {
        dateTimeHistory: [],
        maschineId: undefined,
        k1000: undefined,
        k2000: undefined,
      },
      modelNumList: [],
      stationList: [],
      preferList: [],
      isShowCurvesCharts: true,
      historyTableData: [],
      MaschineParamList: [],
      CartonNoTableData: [],
      historyForm: {
        preferId: undefined,
        maschineId: undefined,
        k1000: undefined,
        k0014: undefined,
        k2000: undefined,
        dateTimeHistory: [],
      },
      isShow: false,
      selectedArrData: [],
      base64: '',
      chart_loading: false,
      menuIdx: 0,
      loading: false,
      query: {},
      page: 1,
      limit: 20,
      total: 0,
      measured: {},
      chart_idx: 0,
      historyData: [],
      curvesHistoryProps: {
        children: 'list',
        label: 'name',
      },
      currentRowId: undefined,
      historyCheckboxGroup: [],
      historyCheckAll: false,
      historyPage: 1,
      historyPagesize: 100,
      infinite_disabled: false,
      infinite_immediate: true,
      k0014ss: [],
      curvesListK0014: [],
      form: {
        dateTime: [],
      },
      nav_list: [
        {
          title: '测量值包括历史',
        },
        {
          title: '特性概览+数值图表',
        },
        {
          title: '设备历史查询',
        },
      ],
    }
  },
  created() {
    const end_time = new Date().format('yyyy-MM-dd hh:mm:ss')
    let start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24)
    let start_time = new Date(start).format('yyyy-MM-dd hh:mm:ss')

    this.form.dateTime.push(start_time)
    this.form.dateTime.push(end_time)
    this.query = this.$route.query

    // this.form.dateTime.push("2022-01-04 00:00:00");
    // this.form.dateTime.push("2022-01-06 00:00:00");
  },
  mounted() {
    this.hasCurves()
    this.getMeasured()
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    async querySerialNumber() {
      let reqData = {
        k1000: this.historyForm.k1000,
        k2000: this.historyForm.k2000,
        k0010: this.historyForm.maschineId,
        beginTime: this.historyForm.dateTimeHistory[0],
        endTime: this.historyForm.dateTimeHistory[1],
        k0014: this.historyForm.k0014,
      }

      await getSerialNumber(reqData).then((res) => {
        let CartonNoTableData = []
        if (res.data && res.data.length > 0) {
          res.data.forEach((item, index) => {
            let data = { name: item, id: index }
            CartonNoTableData.push(data)
          })
        }
        this.CartonNoTableData = CartonNoTableData
      })
    },
    async getCurveshypothesis_() {
      let reqData = {
        k1000: this.curve.k1000,
        k2000: this.curve.k2000,
        k0010: this.curve.maschineId,
        k0014: this.k0014ss,
        a_value: '0.005',
        target: this.whatifTarget,
      }

      await getCurveshypothesis(reqData).then((res) => {
        this.whatiftest = res.data
      })
    },

    async getCurvesPointdata_() {
      await getCurvesPointdata(
        this.curve.k1000,
        this.curve.k2000,
        this.curve.maschineId,
        this.k0014ss
      ).then((res) => {
        this.whatiftestList = res.data
      })
    },

    //提交目标值，返回假设分析结果参数
    submitWhatifTarget() {
      if (this.whatifTarget && this.whatifTarget !== '') {
        this.getCurveshypothesis_()

        this.getCurvesPointdata_()

        // this.whatifResultMsg = res.data;
        this.whatifResulEcharts = true
        setTimeout(() => {
          this.darwWhatifEcharts()
        }, 500)
      } else {
        this.$message.error('目标值不能为空!')
      }

      this.dialogVisibleTarget = false
    },
    //画假设分析相关图
    darwWhatifEcharts() {
      let pillars = []
      let line = []
      let highAndLowResult = []

      this.whatiftestList.forEach((item, index) => {
        let numA = Number(item.a)
        let numB = Number(item.b)
        pillars.push(numA.toFixed(3))
        line.push(numB.toFixed(3))

        if (this.whatiftest.high_line < numA) {
          let highData = {
            name: 'highLine',
            value: numA,
            xAxis: index,
            yAxis: numA,
          }
          highAndLowResult.push(highData)
        } else if (this.whatiftest.low_line > numA) {
          let lowData = {
            name: 'lowLine',
            value: numA,
            xAxis: index,
            yAxis: numA,
          }
          highAndLowResult.push(lowData)
        }
      })

      setTimeout(() => {
        this.darwWhatifTest(this.whatiftest)
        this.darwWhatifpillars(line)
        this.darwWhatifLine(pillars, highAndLowResult)
      })
    },
    //画假设检验图
    darwWhatifTest(testData) {
      let echart = this.$echarts.init(
        document.getElementById('main-whatif-test')
      )
      let option = {
        title: {
          text: '均值是否小于' + this.whatifTarget,
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            // restore: {},
            saveAsImage: {},
          },
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: [''],
        },
        series: [
          {
            name: '是',
            type: 'bar',
            stack: 'total',
            color: 'rgba(0,151,252,0.75)',
            barWidth: 30,
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data:
              testData.left_hypothesis == '左检验接受原假设'
                ? [0.004]
                : [0.001],
          },
          {
            name: '否',
            type: 'bar',
            color: 'rgba(246,81,81,0.77)',
            stack: 'total',
            barWidth: 30,
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data:
              testData.left_hypothesis == '左检验接受原假设'
                ? [0.001]
                : [0.004],
          },
        ],
      }
      echart.setOption(option)
    },
    //画斜率柱形图
    darwWhatifpillars(line) {
      let echart = this.$echarts.init(
        document.getElementById('main-whatif-pillars')
      )
      let option = {
        title: {
          text: '数据分布-数据相对于目标值位于何处',
          left: 'center',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: -30,
          },
          data: line,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: line,
            type: 'bar',
            barWidth: 30,
          },
        ],
      }
      echart.setOption(option)
    },
    //画斜率折线图
    darwWhatifLine(pillars, highAndLow) {
      let echart = this.$echarts.init(
        document.getElementById('main-whatif-line')
      )
      let option = {
        title: {
          text: '测试数据的均值的单样本t检验',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: -30,
          },
          data: pillars,
        },
        yAxis: {
          type: 'value',
          min: 15,
          max: 25,
        },
        series: [
          {
            data: pillars,
            type: 'line',
            // itemStyle: {
            //     color: '#0038fd'detail
            // },
            markPoint: {
              data: highAndLow,
            },
          },
        ],
      }
      echart.setOption(option)
    },
    //打开假设分析输入参数
    toInputTarget() {
      this.dialogVisibleTarget = true
    },
    //获取单条曲线数据
    getSimpleLists(row) {
      this.curve.k2000 = row.k2000
      let reqData = {
        k0010: this.curve.maschineId,
        k2000: row.k2000,
        k1000: row.k1000,
        k0014s: this.k0014ss,
      }
      console.error(row)
      getSimpleList(reqData).then((res) => {
        let ress = []
        ress = res.data
        console.warn(res.data)
        setTimeout(() => {
          this.drawCurvesChartCurvers(ress)
        }, 500)
      })
      // console.warn(ress);
    },

    //更改单选
    changeK2002(row) {
      if (this.k0014ss.length > 0) {
        this.curvesTypeMsg.forEach((item) => {
          if (item.k2002 === row) {
            this.getSimpleLists(item)
          }
        })
      }
    },
    async getCurvesTypeMsg() {
      let reqData = {
        k1000: this.curve.k1000,
        k0010: this.curve.maschineId,
      }

      await getCurvesType(reqData).then((res) => {
        this.curvesTypeMsg = res.data
      })

      if (this.curvesTypeMsg.length > 0) {
        this.radioGroupSelect = this.curvesTypeMsg[0].k2002
      }
    },

    curvesWhatIfDataCheck(data, nodes) {
      let k0014s = []
      nodes.checkedNodes.forEach((item) => {
        if (typeof item.id === 'string') {
          k0014s.push(item.id)
        }
      })

      // let res = [{'id':0,'name':'全选','list':[]}]
      //   res[0].list=(k0014s)
      // this.curvesWhatIfData =k0014s
      this.k0014ss = k0014s

      this.curvesTypeMsg.forEach((item) => {
        if (item.k2002 === this.radioGroupSelect) {
          this.changeCurvesChange(item)
          // this.changeCurvesChange(this.curvesTypeMsg[0]);
        }
      })
    },
    changeCurvesChange(row) {
      if (this.k0014ss.length > 0) {
        this.getSimpleLists(row)
        this.isShowCurvesCharts = true
        // this.curvesForceStroke32();
        // this.curvesTime32();
      } else {
        this.isShowCurvesCharts = false
        if (document.getElementById('main_whatif-echarts1')) {
          this.$echarts.dispose(document.getElementById('main_whatif-echarts1'))
        }
      }
    },
    curvesChangek1000() {
      this.getCurvesChangek1000()
      this.getCurvesTypeMsg()
    },
    //查询曲线历史集合
    async getCurvesChangek1000() {
      let reqData = {
        k1000: this.curve.k1000,
        k0010: this.curve.maschineId,
        beginTime: this.curve.dateTimeHistory[0],
        endTime: this.curve.dateTimeHistory[1],
      }

      let k0014s = []
      await getCurvesHistoryTree(reqData).then((res) => {
        this.curvesWhatIfData = res.data
        k0014s = res.data
        let result = [{ id: 0, name: '全选', list: [] }]

        result[0].list = k0014s
        console.warn(result)
        this.curvesWhatIfData = result
      })
    },
    //更改工位事件查询机器
    changeCurvesPrefer(id) {
      this.curve.k1000 = undefined
      this.curve.maschineId = undefined
      this.getByMaschineId(id)
    },
    //获取曲线假设分析工位
    async getPreferCurvesList() {
      await getPreferCurves_().then((res) => {
        this.curvesStationList = res.data
        this.loading = false
      })
    },
    changeCurvesMaschine(row) {
      this.getModelNumList(row)
    },
    async getCurvesPreferList() {},

    //关闭弹窗
    closeDialog() {
      this.openWhatIf = false
    },
    //改变被测参数
    async changeMeasures(row) {
      let reqData = {
        k1000: this.historyForm.k1000,
        k2000: row,
        k0010: this.historyForm.maschineId,
        beginTime: this.historyForm.dateTimeHistory[0],
        endTime: this.historyForm.dateTimeHistory[1],
      }

      await getSerialNumber(reqData).then((res) => {
        let CartonNoTableData = []
        if (res.data && res.data.length > 0) {
          res.data.forEach((item, index) => {
            let data = { name: item, id: index }
            CartonNoTableData.push(data)
          })
        }
        this.CartonNoTableData = CartonNoTableData
      })
      row = this.historyForm.k2000.k2000

      this.$forceUpdate()
    },
    //通过型号获取被测参数
    async changeGetMeasuresNumber(id) {
      let reqData = {
        k1000: id,
        k0010: this.historyForm.maschineId,
        beginTime: this.historyForm.dateTimeHistory[0],
        endTime: this.historyForm.dateTimeHistory[1],
      }

      await getMeasuresNumber(reqData).then((res) => {
        this.MaschineParamList = res.data
      })
    },
    //更改型号事件
    Changek1000(row) {
      this.k2000 = undefined
      this.changeGetMeasuresNumber(row)
    },
    //根据机器获取型号
    async getByMaschineId(id) {
      await getByPreferId({ preferId: id }).then((res) => {
        this.preferList = res.data
        this.curvesPreferList = res.data
        // console.error(res.data)
      })
    },
    //当工位号改变时触发
    changePrefer(row) {
      this.historyForm.maschineId = undefined
      this.getByMaschineId(row)
    },
    //当机器改变时触发
    changeMaschine(row) {
      this.getModelNumList(row)
    },
    //曲线假设分析获取系列号
    async getModelNumListByWhatIf(id) {
      if (this.curve.dateTimeHistory.length < 2) {
        this.$message.warning('您需要先选择时间')
      } else {
        this.curve.k1000 = undefined
        let reqData = {
          beginTime: this.curve.dateTimeHistory[0],
          endTime: this.curve.dateTimeHistory[1],
          maschineId: id,
        }
        await getPartById(reqData).then((res) => {
          this.curvesModelNumList = res.data
        })
      }
    },

    //获取系列号
    async getModelNumList(id) {
      if (this.historyForm.dateTimeHistory.length < 2) {
        this.$message.warning('您需要先选择时间')
      } else {
        this.historyForm.k1000 = undefined
        let reqData = {
          beginTime: this.historyForm.dateTimeHistory[0],
          endTime: this.historyForm.dateTimeHistory[1],
          maschineId: id,
        }
        await getPartById(reqData).then((res) => {
          this.modelNumList = res.data
          this.curvesModelNumList = res.data
        })
      }
    },
    //更改表格样式
    rowStyle({ row, rowIndex }) {
      const checkIdList = this.selectedArrData.map((item) => item.id)
      if (checkIdList.includes(row.id)) {
        return {
          backgroundColor: 'rgba(255,0,0,0.30)',
          color: 'red',
        }
      }
    },
    rowCartonNoStyle(row, column, event) {
      // row.id字段可以是数据列表中的任意唯一字段
      if (this.currentRowId === row.id) return
      this.currentRowId = row.id
      // do something
    },
    //多选时间-查询测量值
    handleSelectionChange(val) {
      this.selectedArrData = val
      this.queryDataByK0014()
    },
    //返回最终请求参数
    setSelectedArrData() {
      // return this.selectedArrData.map(item => {item.name});
      let checkIdList = []
      this.selectedArrData.map((item) => {
        checkIdList.push(item.name)
      })
      return checkIdList
    },
    //查询测量值
    async queryDataByK0014() {
      let reqData = {
        k1000: this.historyForm.k1000,
        k2000: this.historyForm.k2000,
        k0010: this.historyForm.maschineId,
        k0014s: this.setSelectedArrData(),
      }
      this.historyTableData = []
      await getByK0014(reqData).then((res) => {
        this.historyTableData.push(res.data)
        setTimeout(() => {
          this.drawHistoryLineChart(
            res.data.curveList,
            res.data.list[0].k2002,
            res.data
          )
        }, 500)
      })
    },
    changeDateTimeByHistory() {},
    handleSizeChange(val) {
      this.limit = val

      switch (this.menuIdx) {
        case '0':
          this.getMeasured()
          break
        case '1':
          this.getOverview()
          break
        case '3':
          this.curvesTable()
          break
        case '5':
          this.loading = false
          // this.curvesTable();
          break
      }
    },
    handleCurrentChange(val) {
      this.page = val

      if (this.menuIdx == 0) {
        this.getMeasured()
      } else if (this.menuIdx == 1) {
        this.getOverview()
      } else if (this.menuIdx == 3) {
        this.curvesTable()
      }

      // switch (this.menuIdx) {
      //   case 0:
      //     // 测试值包括历史
      //     this.getMeasured();
      //     break;
      //   case 1:
      //     // 特性概览+数值图表
      //     this.getOverview();
      //     break;
      //   case 2:
      //     // 时间力矩位移页面 table表头接口
      //     this.curvesTable();
      //     break;
      // }
    },
    async hasCurves() {
      const res = await hasCurves({
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      })

      if (res.data > 0) {
        this.nav_list.push({ title: '时间力矩位移' })
        this.nav_list.push({ title: '曲线历史集合' })
        this.nav_list.push({ title: '曲线假设分析' })
      }
    },
    /*下载excel -- xbar and rbar*/
    exportExcelTXAndRbar() {
      let resData = {
        k1000: this.measured.resultPage.data[this.chart_idx].k1000,
        k2000: this.measured.resultPage.data[this.chart_idx].k2000,
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      }
      exportExcelXAndRbar(resData).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url

        let timeStr = new Date().getTime()
        let resultStr = 'xbar-rbar' + timeStr
        link.setAttribute('download', resultStr + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    /*下载excel -- 扭力*/
    exportExcelTorsion() {
      let resData = {
        k1000: this.measured.resultPage.data[this.chart_idx].k1000,
        k2000: this.measured.resultPage.data[this.chart_idx].k2000,
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      }
      exportExcelTorsion(resData).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url

        let timeStr = new Date().getTime()
        let resultStr = '扭矩' + timeStr
        link.setAttribute('download', resultStr + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },

    /*下载word*/
    downloadFile() {
      setTimeout(() => {
        let base64_ = this.base64
        let base64R = base64_.slice(22, base64_.length)
        let resData = {
          k1000: this.measured.resultPage.data[this.chart_idx].k1000,
          k2000: this.measured.resultPage.data[this.chart_idx].k2000,
          k0014: this.query.k0014,
          k0010: this.query.k0010,
          base64: base64R,
        }

        exportChat(resData).then((res) => {
          const url = window.URL.createObjectURL(new Blob([res.data]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url

          let timeStr = new Date().getTime()
          let resultStr = '报表' + timeStr
          link.setAttribute('download', resultStr + '.doc')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      }, 500)
    },

    async getAllPrefer() {
      await getPrefer().then((res) => {
        // console.warn(res.data);
        this.stationList = res.data
      })
    },

    getHistoryData() {
      this.getAllPrefer()
      this.loading = false
    },

    async getMeasured() {
      const res = await getMeasured({
        k0014: this.query.k0014,
        k0010: this.query.k0010,
        page: this.page,
        limit: this.limit,
      })

      if (!res?.data) {
        this.loading = false
        this.$message.error('未查询到数据……')
        setTimeout(() => {
          // this.drawBarChart();
          window.history.go(-1)
        }, 2000)
        return
      }
      this.measured = res.data
      this.total = res.data.resultPage.totalRow
      setTimeout(() => {
        this.drawBarChart()
      }, 500)
      this.getMeasuredChart()
      this.loading = false
    },
    // 绘制价值定位图
    drawBarChart() {
      let option_tpl = {
        grid: {
          top: 0,
          left: '10%',
          right: '10%',
          bottom: 10,
        },
        xAxis: {
          type: 'value',
          show: false,
        },
        yAxis: {
          type: 'category',
          show: false,
        },
        series: [
          {
            type: 'bar',
            stack: 'vo',
            data: [0],
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent',
            },
          },
          {
            type: 'bar',
            data: [],
            stack: 'vo',
            itemStyle: {
              color: 'green',
            },
            // label: {
            //   show: true,
            //   position: "right",
            // },
            markLine: {
              symbol: ['none', 'none'],
              type: 'solid',
              data: [
                {
                  label: {
                    position: 'start',
                    fontSize: 10,
                    distance: 0,
                  },
                  lineStyle: {
                    color: 'rgb(30,30,30)',
                    width: 2,
                    type: 'solid',
                  },
                },
              ],
            },
          },
        ],
      }
      this.measured.resultPage.data.map((item, idx) => {
        if (item.k2101 !== null && item.k0001 !== null) {
          let option = JSON.parse(JSON.stringify(option_tpl))

          // option.series[0].data = [item.k0001];
          if (item.k0001 > item.k2101) {
            option.series[0].data = [item.k2101]
            option.series[1].data = [item.k0001 - item.k2101]

            option.xAxis.min = item.k2101 * 0.6
            option.xAxis.max = item.k2101 * 1.4
          } else {
            option.series[0].data = [item.k0001]
            option.series[1].data = [item.k2101 - item.k0001]

            option.xAxis.min = item.k0001 * 0.6
            option.xAxis.max = item.k0001 * 1.4
          }

          option.series[1].markLine.data[0].xAxis = item.k2101
          if (item.k2110) {
            option.series[1].markLine.data.push({
              xAxis: item.k2110,
              label: {
                position: 'start',
                fontSize: 10,
                distance: 0,
              },
              lineStyle: {
                color: 'orange',
                width: 2,
                type: 'solid',
              },
            })
          }
          if (item.k2111) {
            option.series[1].markLine.data.push({
              xAxis: item.k2111,
              label: {
                position: 'start',
                fontSize: 10,
                distance: 0,
              },
              lineStyle: {
                color: 'orange',
                width: 2,
                type: 'solid',
              },
            })
          }
          if (item.k2114) {
            option.series[1].markLine.data.push({
              xAxis: item.k2114,
              label: {
                position: 'start',
                fontSize: 10,
                distance: 0,
              },
              lineStyle: {
                color: 'red',
                width: 2,
                type: 'solid',
              },
            })
          }
          if (item.k2115) {
            option.series[1].markLine.data.push({
              xAxis: item.k2115,
              label: {
                position: 'start',
                fontSize: 10,
                distance: 0,
              },
              lineStyle: {
                color: 'red',
                width: 2,
                type: 'solid',
              },
            })
          }
          // if (idx == 0) {

          // }
          let chart = this.$echarts.init(document.getElementById('bar' + idx))
          chart.setOption(option)
        }
      })
    },
    selectChartIdx(idx) {
      this.chart_idx = idx
      if (this.menuIdx == 0 || this.menuIdx == 2) {
        this.getMeasuredChart()
      } else if (this.menuIdx == 1) {
        this.getValueChart()
      } else if (this.menuIdx == 3) {
        this.curvesForceStroke()
        this.curvesTime()
      } else if (this.menuIdx == 4) {
      }
    },
    // 获取XbarR接口数据
    async getXbarR() {
      const { data } = await getXbarR({
        k1000: this.measured.resultPage.data[this.chart_idx].k1000,
        k2000: this.measured.resultPage.data[this.chart_idx].k2000,
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      })

      this.drawXbarChart(data)
      this.drawRbarChart(data)
    },
    drawXbarChart(data) {
      let item = []
      item = data.xbarLists
      let max_num = this.getListMaxMinValue(data.xbarList, 'max')
      let min_num = this.getListMaxMinValue(data.xbarList, 'min')

      let xbar = this.$echarts.init(document.getElementById('xbar'))
      let option = {
        title: {
          left: 'center',
          text: 'x-bar',
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let idx = params[0].dataIndex
            let info = item[idx]

            if (info && info.k0014 && info.ravg) {
              return (
                '序列号：' + info.k0014 + '<br/>' + '极差平均值：' + info.ravg
              )
            }
            return null
          },
        },
        xAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          min:
            Math.floor(data.xdown - 1) < Math.floor(min_num - 1)
              ? Math.floor(data.xdown - 1)
              : Math.floor(min_num - 1),
          max:
            Math.ceil(data.xup + 1) > Math.ceil(max_num + 1)
              ? Math.ceil(data.xup + 1)
              : Math.ceil(max_num + 1),
          // min: Math.floor(data.xdown - 1),
          // max: Math.ceil(data.xup + 1),
        },
        series: [
          {
            type: 'line',
            data: data.xbarList,
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  yAxis: data.xavg,
                  itemStyle: { color: 'rgb(92, 178, 52)' },
                },
                {
                  yAxis: data.xup,
                  itemStyle: { color: 'rgb(255, 137, 0)' },
                },
                {
                  yAxis: data.xdown,
                  itemStyle: { color: 'rgb(255, 137, 0)' },
                },
              ],
            },
          },
        ],
      }
      xbar.setOption(option)
    },
    drawRbarChart(data) {
      let item = []
      item = data.rbarLists
      let max_num = this.getListMaxMinValue(data.rbarList, 'max')
      let min_num = this.getListMaxMinValue(data.rbarList, 'min')
      let rbar = this.$echarts.init(document.getElementById('rbar'))
      let option = {
        title: {
          left: 'center',
          text: 'r-bar',
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let idx = params[0].dataIndex
            let info = item[idx]
            return (
              '序列号：' + info.k0014 + '<br/>' + '极差平均值：' + info.ravg
            )
          },
        },
        xAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          min:
            Math.floor(data.rdown - 0.1) < Math.floor(min_num - 0.1)
              ? Math.floor(data.rdown - 1)
              : Math.floor(min_num - 0.1),
          max:
            Math.ceil(data.rup + 0.1) > Math.ceil(max_num + 0.1)
              ? Math.ceil(data.rup + 1)
              : Math.ceil(max_num + 0.1),
        },
        series: [
          {
            type: 'line',
            data: data.rbarList,
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  yAxis: data.ravg,
                  itemStyle: { color: 'rgb(92, 178, 52)' },
                },
                {
                  yAxis: data.rup,
                  itemStyle: { color: 'rgb(255, 137, 0)' },
                },
                {
                  yAxis: data.rdown,
                  itemStyle: { color: 'rgb(255, 137, 0)' },
                },
              ],
            },
          },
        ],
      }
      rbar.setOption(option)
    },

    async getMeasuredChart() {
      if (this.chart_idx === null) {
        return
      }
      this.chart_loading = true
      this.getXbarR()

      const res = await getMeasuredChart({
        k1000: this.measured.resultPage.data[this.chart_idx].k1000,
        k2000: this.measured.resultPage.data[this.chart_idx].k2000,
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      })
      // alert(this.chart_idx);
      // alert(res.data.list[this.chart_idx].k2002);
      // let curveList = res.data.list.map((vo)=>{
      //   return vo.k0001;
      // })
      setTimeout(() => {
        this.drawLineChart(res.data.curveList, res.data.list[0].k2002, res.data)
      })
      this.drawHistogramChart(res.data.curveList)
    },
    // 绘制直方图
    drawHistogramChart(data) {
      let new_data = data.map((item) => {
        return item[1]
      })
      let bar_chart = this.$echarts.init(document.getElementById('bar_chart'))

      let val = ecStat.histogram(new_data).data

      let bar_data = val.map((item) => {
        return [item[4], item[1]]
      })

      let x = val.map((item) => {
        return item[0]
      })
      // x.push(val[3]-val[2])
      let y = val.map((item) => {
        return item[1]
      })
      let max = ecStat.statistics.max(y)
      //求数组和
      let getSum = function(x, y) {
        return parseFloat(x) + parseFloat(y)
      }
      //求平均值
      let getMean = function(arr_x, arr_y) {
        var mean = 0
        var sum = 0
        var len = 1
        if (arr_x.length == arr_y.length) {
          len = arr_y.reduce(getSum)
          for (var i = 0; i < arr_x.length; i++) {
            sum = sum + parseFloat(arr_x[i]) * parseFloat(arr_y[i])
          }
        }
        mean = (sum / len).toFixed(0)
        return mean
      }
      //求标准差
      let getStdev = function(arr_x, arr_y, avg) {
        var sum = 0
        var len = arr_y.reduce(getSum) //总样本数
        var subtractAvg = []
        for (var i = 0; i < arr_x.length; i++) {
          //做平均差平方
          subtractAvg.push((arr_x[i] - avg) * (arr_x[i] - avg))
        }
        for (var j = 0; j < subtractAvg.length; j++) {
          //平均差平方和
          sum = sum + parseFloat(subtractAvg[j]) * parseFloat(arr_y[j])
        }
        return Math.sqrt(sum / len) //标准偏差
      }
      let mean = getMean(x, y)
      let stdev = getStdev(x, y, mean)
      // 获取正态分布拟合值
      let normal_list = x.map((val) => {
        return (
          (1 / Math.sqrt(2 * Math.PI)) *
          stdev *
          Math.exp((-1 * ((val - mean) * (val - mean))) / (2 * stdev * stdev))
        )
      })

      bar_data = [['', 0]].concat(bar_data)
      bar_data.push([' ', 0])

      normal_list = [0].concat(normal_list)
      normal_list.push(0)

      // 去重，让线头更平滑

      let new_normal_list = []
      normal_list.map((item, idx) => {
        if (!(normal_list[idx + 1] && item == normal_list[idx + 1])) {
          new_normal_list.push(item)
        }
      })

      let option = {
        title: {
          left: 'center',
          text: '概率分布图',
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 45,
            },
            // show:false
          },
          {
            type: 'category',
            show: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
            max: max + 1,
          },
          {
            type: 'value',
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            data: bar_data,
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barwidth: '60%',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
          {
            data: new_normal_list,
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'line',
            smooth: true,
            symbol: 'none',
          },
        ],
      }

      bar_chart.setOption(option)
    },
    drawHistoryLineChart(data, name, item) {
      // let that = this;

      // 计算y轴的上下范围
      let values = item.list.map((vo) => {
        return vo.k0001
      })
      values.push(item.acceptanceDown)
      values.push(item.acceptanceUp)
      values.push(item.scrapDown)
      values.push(item.scrapUp)
      values.push(item.toleranceDown)
      values.push(item.toleranceUp)

      let max_value = ecStat.statistics.max(values)
      let min_value = ecStat.statistics.min(values)

      // 绘制标线
      let line_list = []
      // line_list.push({
      //   name:"中位数",
      //   type: 'median',
      //   lineStyle: { color: "(255, 137, 0)", type:'solid' },
      //   label:{
      //     formatter: '{b}: {c}',
      //     color: "(255, 137, 0)"
      //   }
      // })
      line_list.push({
        name: '平均数',
        type: 'average',
        lineStyle: { color: 'rgb(92, 178, 52)', type: 'solid' },
        label: {
          formatter: '{b}: {c}',
          color: 'rgb(92, 178, 52)',
        },
      })
      if (item.acceptanceDown !== null) {
        line_list.push({
          name: '控制限下限',
          yAxis: item.acceptanceDown,
          itemStyle: { color: 'rgb(92, 178, 52)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(92, 178, 52)',
          },
        })
        line_list.push({
          name: '控制限上限',
          yAxis: item.acceptanceUp,
          itemStyle: { color: 'rgb(92, 178, 52)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(92, 178, 52)',
          },
        })
      }
      if (item.toleranceUp !== null) {
        line_list.push({
          name: '公差限上限',
          yAxis: item.toleranceUp,
          itemStyle: { color: 'rgb(255, 137, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: '(255, 137, 0)',
          },
        })
        line_list.push({
          name: '公差限下限',
          yAxis: item.toleranceDown,
          itemStyle: { color: 'rgb(255, 137, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: '(255, 137, 0)',
          },
        })
      }
      if (item.scrapUp !== null) {
        line_list.push({
          name: '报废限上限',
          yAxis: item.scrapUp,
          itemStyle: { color: 'rgb(139, 0, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(139, 0, 0)',
          },
        })
        line_list.push({
          name: '报废限下限',
          yAxis: item.scrapDown,
          itemStyle: { color: 'rgb(139, 0, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(139, 0, 0)',
          },
        })
      }

      // let curveList = {};
      // let curveList = ecStat.regression("exponential", data);

      let chart = this.$echarts.init(
        document.getElementById('by-history-grid-echarts-line')
      )
      let option = {
        title: {
          left: 'center',
          text: name,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
          formatter: function(params) {
            let idx = params[0].dataIndex
            let info = item.list[idx]
            return '测量值：' + info.k0001 + '<br/>' + '时间：' + info.k0004
          },
        },
        xAxis: {
          type: 'value',
          axisLine: { show: false },
          minInterval: 1,
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          min: min_value - 1,
          max: max_value + 1,
        },
        series: [
          {
            data: data,
            type: 'line',
            markLine: {
              symbol: ['none', 'none'],
              data: line_list,
            },
          },
          // {
          //   data: curveList.points,
          //   type: "line",
          //   symbol: "none",
          // },
        ],
      }

      chart.setOption(option)

      // setTimeout(() => {
      //   let dataURL = chart.getDataURL("png");
      //   this.base64 = dataURL
      // }, 1000)

      this.chart_loading = false
    },
    drawLineChart(data, name, item) {
      // let that = this;

      // 计算y轴的上下范围
      let values = item.list.map((vo) => {
        return vo.k0001
      })
      values.push(item.acceptanceDown)
      values.push(item.acceptanceUp)
      values.push(item.scrapDown)
      values.push(item.scrapUp)
      values.push(item.toleranceDown)
      values.push(item.toleranceUp)

      let max_value = ecStat.statistics.max(values)
      let min_value = ecStat.statistics.min(values)

      // 绘制标线
      let line_list = []
      // line_list.push({
      //   name:"中位数",
      //   type: 'median',
      //   lineStyle: { color: "(255, 137, 0)", type:'solid' },
      //   label:{
      //     formatter: '{b}: {c}',
      //     color: "(255, 137, 0)"
      //   }
      // })
      line_list.push({
        name: '平均数',
        type: 'average',
        lineStyle: { color: 'rgb(92, 178, 52)', type: 'solid' },
        label: {
          formatter: '{b}: {c}',
          color: 'rgb(92, 178, 52)',
        },
      })
      if (item.acceptanceDown !== null) {
        line_list.push({
          name: '控制限下限',
          yAxis: item.acceptanceDown,
          itemStyle: { color: 'rgb(92, 178, 52)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(92, 178, 52)',
          },
        })
        line_list.push({
          name: '控制限上限',
          yAxis: item.acceptanceUp,
          itemStyle: { color: 'rgb(92, 178, 52)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(92, 178, 52)',
          },
        })
      }
      if (item.toleranceUp !== null) {
        line_list.push({
          name: '公差限上限',
          yAxis: item.toleranceUp,
          itemStyle: { color: 'rgb(255, 137, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: '(255, 137, 0)',
          },
        })
        line_list.push({
          name: '公差限下限',
          yAxis: item.toleranceDown,
          itemStyle: { color: 'rgb(255, 137, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: '(255, 137, 0)',
          },
        })
      }
      if (item.scrapUp !== null) {
        line_list.push({
          name: '报废限上限',
          yAxis: item.scrapUp,
          itemStyle: { color: 'rgb(139, 0, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(139, 0, 0)',
          },
        })
        line_list.push({
          name: '报废限下限',
          yAxis: item.scrapDown,
          itemStyle: { color: 'rgb(139, 0, 0)' },
          label: {
            formatter: '{b}: {c}',
            color: 'rgb(139, 0, 0)',
          },
        })
      }

      // let curveList = {};
      // let curveList = ecStat.regression("exponential", data);

      let chart = this.$echarts.init(document.getElementById('line_chart'))
      let option = {
        title: {
          left: 'center',
          text: name,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
          formatter: function(params) {
            let idx = params[0].dataIndex
            let info = item.list[idx]
            return '测量值：' + info.k0001 + '<br/>' + info.dateTime
          },
        },
        xAxis: {
          type: 'value',
          axisLine: { show: false },
          minInterval: 1,
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          min: min_value - 1,
          max: max_value + 1,
        },
        series: [
          {
            data: data,
            type: 'line',
            markLine: {
              symbol: ['none', 'none'],
              data: line_list,
            },
          },
          // {
          //   data: curveList.points,
          //   type: "line",
          //   symbol: "none",
          // },
        ],
      }

      chart.setOption(option)

      setTimeout(() => {
        let dataURL = chart.getDataURL('png')
        this.base64 = dataURL
      }, 1000)

      this.chart_loading = false
    },
    async getOverview() {
      const res = await getOverview({
        k0014: this.query.k0014,
        k0010: this.query.k0010,
        page: this.page,
        limit: this.limit,
      })
      if (res.status == 200) {
        this.measured = res.data
        this.total = res.data.resultPage.totalRow
        this.getValueChart()
      }
      this.loading = false
    },
    async getValueChart() {
      if (this.chart_idx === null) {
        return
      }
      this.chart_loading = true
      const res = await getValueChart({
        k1000: this.measured.resultPage.data[this.chart_idx].k1000,
        k2000: this.measured.resultPage.data[this.chart_idx].k2000,
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      })
      this.drawLineChart(res.data.curveList, res.data.list[0].k2002, res.data)
    },

    // 时间力矩位移页面 table表头接口
    async curvesTable() {
      const res = await curvesTable({
        k0014: this.query.k0014,
        k0010: this.query.k0010,
        page: this.page,
        limit: this.limit,
      })
      // const his = await curvesHistory({
      //   k0014: this.query.k0014,
      //   k0010: this.query.k0010,
      //   page: 1,
      //   limit: 20,
      // })

      if (res.status == 200) {
        this.measured = res.data
        this.total = res.data.resultPage.totalRow
        setTimeout(() => {
          this.drawBarChart()
        }, 500)
        this.curvesForceStroke()
        this.curvesTime()
      }
      this.loading = false
    },
    async curvesForceStroke() {
      const res = await curvesForceStroke32({
        k0014s: [this.query.k0014],
        k0010: this.query.k0010,
      })
      if (res.status == 200) {
        this.drawCurvesChart1(res.data)
      }
    },
    getListMaxMinValue(arr, maximin) {
      if (maximin == 'max') {
        return Math.max.apply(Math, arr)
      } else if (maximin == 'min') {
        return Math.min.apply(Math, arr)
      }
    },
    drawCurvesChart1(res) {
      let series = []
      let colors = []
      let y_min_arr = []
      let y_max_arr = []
      let x_min_arr = []
      let x_max_arr = []
      res.map((item) => {
        const x = item.x
        const y = item.y
        colors.push(item.color)
        let data = x.map((vo, idx) => {
          return [vo, y[idx]]
        })

        y_min_arr.push(this.getListMaxMinValue(y, 'min'))
        y_max_arr.push(this.getListMaxMinValue(y, 'max'))

        x_min_arr.push(this.getListMaxMinValue(x, 'min'))
        x_max_arr.push(this.getListMaxMinValue(x, 'max'))

        series.push({
          name: item.k0014,
          data: data,
          type: 'line',
          smooth: true,
          symbol: 'none',
        })
      })

      // let y_min = ecStat.statistics.min(y_min_arr);
      // let y_max = ecStat.statistics.max(y_max_arr);
      // let x_min = ecStat.statistics.min(x_min_arr);
      // let x_max = ecStat.statistics.max(x_max_arr);

      let y_min = this.getListMaxMinValue(y_min_arr, 'min')
      let y_max = this.getListMaxMinValue(y_max_arr, 'max')
      let x_min = this.getListMaxMinValue(x_min_arr, 'min')
      let x_max = this.getListMaxMinValue(x_max_arr, 'max')

      this.$echarts.dispose(document.getElementById('curves_chart1'))
      let chart = this.$echarts.init(document.getElementById('curves_chart1'))
      let option = {
        title: {
          left: 'center',
          text: '力矩位移曲线',
        },
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            saveAsImage: {},
            myChange: {
              show: true,
              title: '交换坐标轴',
              icon:
                'path://M560.697 472.022a23 23 0 0 1 13.27 4.214L820.026 650.05c10.375 7.33 12.844 21.681 5.515 32.056a23 23 0 0 1-5.1 5.215L574.383 869.495c-10.21 7.559-24.613 5.41-32.171-4.799a23 23 0 0 1-4.515-13.686V733.816h-201.16c-143.36 0.815-221.206-70.034-233.537-212.546 12.457 13.043 66.902 90 233.537 90 111.09 0 178.144-1.277 201.16-3.828v-112.42c0-12.703 10.297-23 23-23zM406.788 119.304a23 23 0 0 1 4.515 13.686v117.194h201.16c143.36-0.815 221.206 70.034 233.537 212.546-12.457-13.043-66.902-90-233.537-90-111.09 0-178.144 1.277-201.16 3.828v112.42c0 12.703-10.297 23-23 23a23 23 0 0 1-13.27-4.214L128.974 333.95c-10.375-7.33-12.844-21.681-5.515-32.056a23 23 0 0 1 5.1-5.215l246.058-182.173c10.21-7.559 24.613-5.41 32.171 4.799z',
              onclick: function() {
                // let option = params.option;
                let option = chart.getOption()

                let xAxis = JSON.parse(JSON.stringify(option.xAxis))
                let yAxis = JSON.parse(JSON.stringify(option.yAxis))
                option.xAxis = yAxis
                option.yAxis = xAxis

                option.series.map((vo, idx) => {
                  option.series[idx].data = vo.data.map((item) => {
                    return [item[1], item[0]]
                  })
                })

                // return params;
                chart.setOption(option)
              },
            },
          },
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '5%',
          top: 30,
          bottom: 20,
        },
        grid: {
          left: '25%',
          width: '60%',
          // height:"90%",
        },
        xAxis: {
          max: Math.ceil(x_max + 2),
          min: Math.ceil(x_min - 1),
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: {
          max: Math.ceil(y_max + 2),
          min: Math.ceil(y_min - 1),
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].yunit,
          nameLocation: 'middle',
          nameGap: 30,
        },
        series: series,
      }
      chart.setOption(option)
    },
    async curvesTime() {
      const res = await curvesTime({
        k0014: this.query.k0014,
        k0010: this.query.k0010,
      })
      if (res.status == 200) {
        this.drawCurvesChart2(res.data)
      }
    },
    drawCurvesChart2(res) {
      let series = []
      let colors = []

      if (res && res.length > 0) {
        res.map((item) => {
          const x = item.x
          const y = item.y
          let data = x.map((vo, idx) => {
            return [vo, y[idx]]
          })

          colors.push(item.color)
          series.push({
            name: item.k0014,
            data: data,
            type: 'line',
            smooth: true,
            symbol: 'none',
          })
        })
      }

      // res[0].list.map((item) => {
      //   const x = item.x;
      //   const y = item.y;
      //   let data = x.map((vo, idx) => {
      //     return [vo, y[idx]];
      //   });
      //   colors.push(item.color);
      //   series.push({
      //     name: item.k0014,
      //     data: data,
      //     type: "line",
      //     smooth: true,
      //     symbol: "none",
      //   });
      // });
      //
      // res[1].list.map((item) => {
      //   const x = item.x;
      //   const y = item.y;
      //   let data = x.map((vo, idx) => {
      //     return [vo, y[idx]];
      //   });
      //   colors.push(item.color);
      //   series.push({
      //     name: item.k0014,
      //     yAxisIndex: 1,
      //     data: data,
      //     type: "line",
      //     smooth: true,
      //     symbol: "none",
      //   });
      // });

      let option = {
        title: {
          left: 'center',
          text: '时间力矩位移曲线',
        },
        color: colors,
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            // restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '5%',
          top: 30,
          bottom: 20,
        },
        grid: {
          left: '25%',
          width: '60%',
          // height:"70%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'value',
          // min: 0.5,
          // max: 2.5,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res.xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            name: res.yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            name: res.yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
        ],
        series: series,
      }

      this.$echarts.dispose(document.getElementById('curves_chart2'))
      let chart = this.$echarts.init(document.getElementById('curves_chart2'))
      chart.setOption(option)
    },

    // 曲线历史集合
    async curvesHistory() {
      // if (this.infinite_disabled) {

      //   this.loading = false;
      //   return;
      // }
      const { status, data } = await curvesHistoryTree({
        k0010: this.query.k0010,
        beginTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
        name: this.serialNumberInput,
      })
      if (status === 200) {
        // if (this.historyPage === 1) {
        //   this.historyData = data.data;
        //   this.infinite_disabled = false;
        //   // this.infinite_immediate = true;
        // } else {
        //   this.historyData = this.historyData.concat(data.data);
        // }
        // if (data.data.length === 0) {
        //   this.infinite_disabled = true;
        // }
        // this.historyPage = this.historyPage + 1;
        this.historyData = data
        // this.changeHistoryChart();
      }

      this.loading = false
    },
    curvesHistoryCheckChange(data, checked, indeterminate) {},
    curvesHistoryCheck(data, nodes) {
      let k0014s = []
      nodes.checkedNodes.forEach((item) => {
        if (typeof item.id === 'string') {
          k0014s.push(item.id)
        }
      })
      this.historyCheckboxGroup = k0014s

      this.changeHistoryChart()
    },
    changeDateTime(e) {
      this.form.dateTime = e
      this.curvesHistory()
    },
    checkAll() {
      if (this.historyCheckAll) {
        this.historyCheckboxGroup = this.historyData.map((item) => {
          return item.k0014
        })
        this.changeHistoryChart()
      } else {
        this.historyCheckboxGroup = []
        this.changeHistoryChart()
      }
    },
    changeHistoryChart() {
      if (this.historyCheckboxGroup.length > 0) {
        this.curvesForceStroke32()
        this.curvesTime32()
      } else {
        this.isShow = false
        if (document.getElementById('curves_history_chart1')) {
          this.$echarts.dispose(
            document.getElementById('curves_history_chart1')
          )
        }
        if (document.getElementById('curves_history_chart2')) {
          this.$echarts.dispose(
            document.getElementById('curves_history_chart2')
          )
        }
      }
    },
    async curvesForceStroke32() {
      const { status, data } = await curvesForceStroke32({
        k0014s: this.historyCheckboxGroup,
        k0010: this.query.k0010,
      })
      if (status == 200) {
        this.drawCurvesHistoryChart1(data)
      }
    },
    drawCurvesHistoryChart1(res) {
      let series = []
      let colors = []
      let y_min_arr = []
      let y_max_arr = []
      let x_min_arr = []
      let x_max_arr = []
      res.map((item) => {
        const x = item.x
        const y = item.y
        colors.push(item.color)
        let data = x.map((vo, idx) => {
          return [vo, y[idx]]
        })

        y_min_arr.push(this.getListMaxMinValue(y, 'min'))
        y_max_arr.push(this.getListMaxMinValue(y, 'max'))

        x_min_arr.push(this.getListMaxMinValue(x, 'min'))
        x_max_arr.push(this.getListMaxMinValue(x, 'max'))

        series.push({
          name: item.k0014,
          data: data,
          type: 'line',
          smooth: true,
          symbol: 'none',
        })
      })

      // let y_min = ecStat.statistics.min(y_min_arr);
      // let y_max = ecStat.statistics.max(y_max_arr);
      // let x_min = ecStat.statistics.min(x_min_arr);
      // let x_max = ecStat.statistics.max(x_max_arr);

      let y_min = this.getListMaxMinValue(y_min_arr, 'min')
      let y_max = this.getListMaxMinValue(y_max_arr, 'max')
      let x_min = this.getListMaxMinValue(x_min_arr, 'min')
      let x_max = this.getListMaxMinValue(x_max_arr, 'max')

      this.$echarts.dispose(document.getElementById('curves_history_chart1'))
      let chart = this.$echarts.init(
        document.getElementById('curves_history_chart1')
      )
      let option = {
        title: {
          left: 'center',
          text: '力矩位移曲线',
        },
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            saveAsImage: {},
            myChange: {
              show: true,
              title: '交换坐标轴',
              icon:
                'path://M560.697 472.022a23 23 0 0 1 13.27 4.214L820.026 650.05c10.375 7.33 12.844 21.681 5.515 32.056a23 23 0 0 1-5.1 5.215L574.383 869.495c-10.21 7.559-24.613 5.41-32.171-4.799a23 23 0 0 1-4.515-13.686V733.816h-201.16c-143.36 0.815-221.206-70.034-233.537-212.546 12.457 13.043 66.902 90 233.537 90 111.09 0 178.144-1.277 201.16-3.828v-112.42c0-12.703 10.297-23 23-23zM406.788 119.304a23 23 0 0 1 4.515 13.686v117.194h201.16c143.36-0.815 221.206 70.034 233.537 212.546-12.457-13.043-66.902-90-233.537-90-111.09 0-178.144 1.277-201.16 3.828v112.42c0 12.703-10.297 23-23 23a23 23 0 0 1-13.27-4.214L128.974 333.95c-10.375-7.33-12.844-21.681-5.515-32.056a23 23 0 0 1 5.1-5.215l246.058-182.173c10.21-7.559 24.613-5.41 32.171 4.799z',
              onclick: function() {
                // let option = params.option;
                let option = chart.getOption()

                let xAxis = JSON.parse(JSON.stringify(option.xAxis))
                let yAxis = JSON.parse(JSON.stringify(option.yAxis))
                option.xAxis = yAxis
                option.yAxis = xAxis

                option.series.map((vo, idx) => {
                  option.series[idx].data = vo.data.map((item) => {
                    return [item[1], item[0]]
                  })
                })

                // return params;
                chart.setOption(option)
              },
            },
          },
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '5%',
          top: 30,
          bottom: 20,
        },
        grid: {
          left: '25%',
          width: '60%',
          // height:"90%",
        },
        xAxis: {
          max: Math.ceil(x_max + 2),
          min: Math.ceil(x_min - 1),
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: {
          max: Math.ceil(y_max + 2),
          min: Math.ceil(y_min - 1),
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].yunit,
          nameLocation: 'middle',
          nameGap: 30,
        },
        series: series,
      }
      chart.setOption(option)
    },
    async curvesTime32() {
      const { status, data } = await curvesTime32({
        k0014s: this.historyCheckboxGroup,
        k0010: this.query.k0010,
      })
      if (status == 200) {
        if (data) this.isShow = true
        // console.warn(data);
        this.drawCurvesHistoryChart2(data)
      }
    },
    drawCurvesHistoryChart2(res) {
      let series = []
      let colors = []

      if (res && res.length > 0) {
        res.forEach((r) => {
          r.list.map((item) => {
            const x = item.x
            const y = item.y
            let data = x.map((vo, idx) => {
              return [vo, y[idx]]
            })

            colors.push(item.color)
            series.push({
              name: item.k0014,
              data: data,
              type: 'line',
              smooth: true,
              symbol: 'none',
            })
          })
        })
      }

      // res[0].list.map((item) => {
      //   const x = item.x;
      //   const y = item.y;
      //   let data = x.map((vo, idx) => {
      //     return [vo, y[idx]];
      //   });
      //   colors.push(item.color);
      //   series.push({
      //     name: item.k0014,
      //     data: data,
      //     type: "line",
      //     smooth: true,
      //     symbol: "none",
      //   });
      // });
      //
      // res[1].list.map((item) => {
      //   const x = item.x;
      //   const y = item.y;
      //   let data = x.map((vo, idx) => {
      //     return [vo, y[idx]];
      //   });
      //   colors.push(item.color);
      //   series.push({
      //     name: item.k0014,
      //     yAxisIndex: 1,
      //     data: data,
      //     type: "line",
      //     smooth: true,
      //     symbol: "none",
      //   });
      // });

      let option = {
        title: {
          left: 'center',
          text: '时间力矩位移曲线',
        },
        color: colors,
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            // restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '5%',
          top: 30,
          bottom: 20,
        },
        grid: {
          left: '25%',
          width: '60%',
          // height:"70%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'value',
          // min: 0.5,
          // max: 2.5,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].list[0].xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            name: res[0].list[0].yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            name: res[1].list[0].yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
        ],
        series: series,
      }

      this.$echarts.dispose(document.getElementById('curves_history_chart2'))
      let chart = this.$echarts.init(
        document.getElementById('curves_history_chart2')
      )
      chart.setOption(option)
    },
    drawCurvesChartCurvers(res) {
      let series = []
      let colors = []
      res[0].list.map((item) => {
        const x = item.x
        const y = item.y
        let data = x.map((vo, idx) => {
          return [vo, y[idx]]
        })
        colors.push(item.color)
        series.push({
          name: item.k0014,
          data: data,
          type: 'line',
          smooth: true,
          symbol: 'none',
        })
      })

      // res[1].list.map((item) => {
      //   const x = item.x;
      //   const y = item.y;
      //   let data = x.map((vo, idx) => {
      //     return [vo, y[idx]];
      //   });
      //   colors.push(item.color);
      //   series.push({
      //     name: item.k0014,
      //     yAxisIndex: 1,
      //     data: data,
      //     type: "line",
      //     smooth: true,
      //     symbol: "none",
      //   });
      // });

      let option = {
        title: {
          left: 'center',
          text: '时间力矩位移曲线',
        },
        color: colors,
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            // restore: {},
            saveAsImage: {},
          },
        },
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   left: "10%",
        //   top: 30,
        //   bottom: 20,
        // },
        grid: {
          left: '40%',
          width: '60%',
          // height:"70%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'value',
          // min: 0.5,
          // max: 2.5,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].list[0].xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            name: res[0].list[0].yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
        ],
        series: series,
      }

      this.$echarts.dispose(document.getElementById('main_whatif-echarts1'))
      let chart = this.$echarts.init(
        document.getElementById('main_whatif-echarts1')
      )
      chart.setOption(option)
    },
    drawCurvesChart(res) {
      let series = []
      let colors = []
      res[0].list.map((item) => {
        const x = item.x
        const y = item.y
        let data = x.map((vo, idx) => {
          return [vo, y[idx]]
        })
        colors.push(item.color)
        series.push({
          name: item.k0014,
          data: data,
          type: 'line',
          smooth: true,
          symbol: 'none',
        })
      })

      res[1].list.map((item) => {
        const x = item.x
        const y = item.y
        let data = x.map((vo, idx) => {
          return [vo, y[idx]]
        })
        colors.push(item.color)
        series.push({
          name: item.k0014,
          yAxisIndex: 1,
          data: data,
          type: 'line',
          smooth: true,
          symbol: 'none',
        })
      })

      let option = {
        title: {
          left: 'center',
          text: '时间力矩位移曲线',
        },
        color: colors,
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            // restore: {},
            saveAsImage: {},
          },
        },
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   left: "10%",
        //   top: 30,
        //   bottom: 20,
        // },
        grid: {
          left: '40%',
          width: '60%',
          // height:"70%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'value',
          min: 0.5,
          max: 2.5,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: res[0].list[0].xunit,
          nameLocation: 'center',
          nameGap: 30,
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            name: res[0].list[0].yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            name: res[1].list[0].yunit,
            nameLocation: 'middle',
            nameGap: 30,
          },
        ],
        series: series,
      }

      this.$echarts.dispose(document.getElementById('curves_history_chart2'))
      let chart = this.$echarts.init(
        document.getElementById('curves_history_chart2')
      )
      chart.setOption(option)
    },
    changeMenu(idx) {
      this.loading = true
      this.menuIdx = idx
      this.chart_idx = 0
      if (document.getElementById('line_chart')) {
        this.$echarts.dispose(document.getElementById('line_chart'))
      }
      if (document.getElementById('by-history-grid-echarts-line')) {
        this.$echarts.dispose(
          document.getElementById('by-history-grid-echarts-line')
        )
      }

      if (document.getElementById('curves_chart1')) {
        this.$echarts.dispose(document.getElementById('curves_chart1'))
      }
      if (document.getElementById('curves_chart2')) {
        this.$echarts.dispose(document.getElementById('curves_chart2'))
      }
      if (document.getElementById('rbar')) {
        this.$echarts.dispose(document.getElementById('rbar'))
      }
      if (document.getElementById('xbar')) {
        this.$echarts.dispose(document.getElementById('xbar'))
      }
      if (document.getElementById('bar_chart')) {
        this.$echarts.dispose(document.getElementById('bar_chart'))
      }
      if (idx == 0) {
        this.getMeasured()
      } else if (idx == 1) {
        this.getOverview()
      } else if (idx == 2) {
        this.getHistoryData()
      } else if (idx == 3) {
        this.curvesTable()
      } else if (idx == 4) {
        this.curvesHistory()
        // this.historyPage = 1;
        // this.changeHistoryChart();
        // this.loading = false;
      } else if (idx == 5) {
        this.getPreferCurvesList()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main_content {
  padding: 20px;
  .filter_btn {
    font-size: 13px;
    padding: 10px 20px;
    text-align: center;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .filter_btn:hover {
    background: #f3f3f3;
  }
  .download_icon {
    margin: 0 auto 10px auto;
    //   text-align:center;
    display: block;
  }
  .col12 {
    margin-bottom: 2px;
    padding: 10px 20px;
    font-size: 13px;
    background: #2761db;
    color: #fff;
  }
  .col24 {
    margin-bottom: 2px;
    padding: 10px 20px;
    font-size: 18px;
    background: #ff2222;
    color: #fff;
    text-align: center;
  }
  .row_flex {
    display: flex;
    align-items: stretch;
  }
  .col6 {
    // display: flex;
    height: 100%;
    padding: 10px 20px;
    background: #c9e2ff;
  }
  .line_chart {
    margin-top: 20px;
    height: 300px;
  }
  .line_chartXAR {
    height: 320px;
  }
  .table_container {
    max-height: 200px;
    overflow-y: scroll;
    position: relative;
    thead {
      position: sticky;
      top: -2px;
      left: 0;
      z-index: 9;
    }
  }
  table {
    // margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-size: 12px;
    th {
      background: #d7d7d7;
      text-align: center;
      border: 1px solid #ccc;
      padding: 10px;
    }
    td {
      border: 1px solid #ccc;
      padding: 10px;
      .bar_chart {
        height: 30px;
        // background: red;
      }
      .smile_icon {
        width: 24px;
        height: 24px;
        display: block;
        margin: auto;
      }
    }
    tr:nth-child(even) {
      background: #f3f3f3;
    }
    tr:hover {
      background: slategrey;
    }
  }
}

.main_container {
  width: 100%;
  height: calc(100vh - 71px);
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  .left-box {
    width: auto;
    height: 100%;
    border: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    border-right: 1px solid #eee;
    .el-tree {
      height: 0;
      flex: 1;
      overflow-y: auto;
    }
    .all_checkbox {
      .el-checkbox {
        text-align: left;
        width: 172px;
        margin: 5px 0;
      }
    }
    .el-checkbox-group {
      height: 0;
      flex: 1;
      overflow-y: auto;
    }
    .el-checkbox {
      margin: 5px 0;
    }
  }
  .right-box {
    flex: 1;
    height: 150%;
    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
}
</style>
<style lang="scss" scoped>
.download-file {
  position: relative;
  left: 46.6%;
  top: 50px;
  z-index: 99999999;
}

.by-history-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.by-history-grid-form {
  width: 95%;
  max-height: 300px;
  margin-top: 20px;
  margin-left: 20px;
  grid-area: 1 / 1 / 2 / 6;
}
.by-history-grid-cartonNo {
  width: 300px;
  margin-left: 20px;
  grid-area: 2 / 1 / 8 / 3;
}
/* .by-history-grid-table {
    grid-area: 2 / 2 / 5 / 6;
    margin-left: 50px;
  }*/
.by-history-grid-echarts {
  grid-area: 2 / 2 / 8 / 6;
  margin-left: 50px;
}

.chart_box_btn {
  position: relative;
  width: 8%;
  left: 81.5%;
  top: 4%;
  z-index: 4;
}
.main_whatif {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 0px;
}
.main_whatif-form {
  height: 100px !important;
  grid-area: 1 / 1 / 3 / 8;
  margin-top: 20px;
  margin-left: 20px;
}
.main_whatif-numList {
  margin-bottom: -170px;
  h3 {
    margin-left: 20px;
    margin-bottom: 20px;
    color: #2761db;
  }
  .el-tree {
    overflow-y: auto;
  }
  grid-area: 3 / 1 / 8 / 3;
}
.main_whatif-msg {
  margin-bottom: -170px;
  grid-area: 3 / 3 / 4 / 8;
}
.main_whatif-echarts {
  .main_whatif-echarts-select-radio-group {
    margin-left: 40%;
    margin-top: 6%;
  }
  grid-area: 2 / 3 / 7 / 8;

  .main_whatif-echarts-select-echarts {
    position: relative;
    top: 52px;
  }
}

.to-whatif-dialog-btn {
  margin-left: 40%;
  margin-top: 6%;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}

.main-whatif-class {
  margin-left: 33%;
}
.right-box-input-flex {
  display: flex;
  /*margin-top: 1.5%;*/
  /*justify-content: space-between;*/
  .el-input {
    /*width: 30%;*/
    /*margin-left: 4%;*/

    padding-right: 1%;
  }
}
</style>
